<template>
	<Layout :innerBottom="true">
		<template #title>订单管理</template>
		<OrderStatus></OrderStatus>

		<view class="iflex column fill search-condition">
			<view class="iflex fill aic">
				<text class="label">时间筛选</text>
				<view class="flex aic jcsb" style="margin-left: 24rpx;">
					<view class="iflex aic jcc show-time" @click.stop="tapShowCalendar('orderBeginTime')">
						{{params.orderBeginTime ||'开始日期'}}
					</view>
					<view class="striping"></view>
					<view class="iflex aic jcc show-time" @click.stop="tapShowCalendar('orderEndTime')">
						{{params.orderEndTime ||'结束日期'}}
					</view>
				</view>
				<u-calendar v-model="showCalendar" mode="date" safe-area-inset-bottom
					@change="calendarChange"></u-calendar>
			</view>
			<view class="iflex jcsb fill">
				<view class="iflex aic jcc quick-date" :class="{active:quickDate === '7d'}"
					@click.stop="tapSetQuickDate('7d')">近7天</view>
				<view class="iflex aic jcc quick-date" :class="{active:quickDate === '1M'}"
					@click.stop="tapSetQuickDate('1M')">近一个月</view>
				<view class="iflex aic jcc quick-date" :class="{active:quickDate === '3M'}"
					@click.stop="tapSetQuickDate('3M')">近三个月</view>
			</view>
		</view>

		<view class="flex ">
			<view class="scroll-wrap">
				<ScrollRefresher @refresh="refresh" @tolower="tolower">
					<OrderItem v-for="item of list" :info="item" :key="item.orderId" @refresh="refresh"></OrderItem>
				</ScrollRefresher>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import OrderStatus from '@/components/b/order-status/order-status.vue';
	import OrderItem from '@/components/b/order-item/order-item.vue';
	import { ref } from 'vue';
	import dayjs from 'dayjs';
	import { useGetDataPaging } from '@/hooks/paging';
	import { getTradeListAssignOrder } from '@/apis/trade';
	import { onLoad } from '@dcloudio/uni-app';

	const showCalendar = ref(false);
	let fieldKey = 'orderBeginTime';
	const params = ref<AnyObject>({
		orderBeginTime: '',
		orderEndTime: ''
	})
	const quickDate = ref('');
	const { list, refresh, tolower } = useGetDataPaging({
		api: getTradeListAssignOrder,
		params: () => {
			const query = { ...params.value };
			if (query.orderBeginTime) {
				query.orderBeginTime = `${query.orderBeginTime} 00:00:00`
			}
			if (query.orderEndTime) {
				query.orderEndTime = `${query.orderEndTime} 23:59:59`
			}
			return query
		}
	});

	onLoad(() => {
		refresh();
	});


	function calendarChange(e : { result : string; }) {
		quickDate.value = '';
		params.value[fieldKey] = e.result;
	}
	function tapShowCalendar(field : string) {
		fieldKey = field;
		showCalendar.value = true;
	}
	function tapSetQuickDate(value : string) {
		quickDate.value = value;
		const number = parseInt(value, 10);
		const unit = value.replace(/\d/ig, '') as any;
		const nowDate = dayjs();
		params.value.orderBeginTime = nowDate.subtract(number, unit).format('YYYY-MM-DD');
		params.value.orderEndTime = nowDate.format('YYYY-MM-DD');
		refresh();
	}
</script>

<style lang="scss">
	.search-condition {
		padding: 40rpx 32rpx 10rpx 32rpx;

		.label {
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
		}

		.striping {
			width: 50rpx;
			height: 2rpx;
			background: #4B5466;
		}

		.show-time {
			width: 228rpx;
			height: 86rpx;
			flex-shrink: 0;
			border-radius: 8rpx;
			background: #ECEDEF;
			color: #4b5466;
			font-size: 26rpx;
			font-weight: 500;
		}

		.quick-date {
			margin-top: 40rpx;
			width: 192rpx;
			height: 66rpx;
			border-radius: 8rpx;
			background: #ECEDEF;
			color: #737d91;
			font-size: 26rpx;
			font-weight: 500;

			&.active {
				border: 2rpx solid #FF710A;
				background: #FFF7F1;
				color: #ff710a;
			}
		}
	}
</style>